<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件绑定</title>
	</head>
	<body>
		<body>
			<div id="app">
				<!-- 1.v-on指令 实现事件的绑定 -->
				<!-- 1.1 直接编辑操作内容 -->
				数值：{{num}}
				<button v-on:click="num++">增加1</button>
				
				<!-- 1.2 v-on的简化操作@ -->
				
	
				<button @click="num=num+666">点击666</button>
				
				<!-- 1.3 通过方法实现新增 -->
				<button @click="addNum">点击-1</button>

			</div>
			<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
			<script>
				const app =new Vue({
					el: "#app",
					data: {
						num: 1
					},
					//定义vue对象中的方法
					methods: {
						addNum(){
							// alert("测试方法是否有效")
							this.num--
						}
					}
				})
			</script>
	</body>
</html>
